<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import { CreateElement } from 'vue'

@Component({
  name: 'RenderPopover'
})
export default class extends Vue {
  // button text
  @Prop({ type: String, required: false, default: 'show' })
  private placeholder!: string

  render (h: CreateElement) {
    return h('el-table-column', {
      props: this.$attrs,
      scopedSlots: {
        default: ({ row }) => {
          const content = row[this.$attrs.prop]
          const isValid = typeof content === 'string' && !!content

          return isValid
            ? h('el-popover', { props: { placement: 'top' } }, [
              h(
                'div',
                { style: { maxWidth: '400px' }, slot: 'default' },
                content
              ),
              h(
                'el-button',
                { props: { type: 'text' }, slot: 'reference' },
                this.placeholder
              )
            ])
            : null
        }
      }
    })
  }
}
</script>
